<template>
  <div>
    <template v-if="this.$store.getters.institute_id == this.$store.getters.userId">
      <div class="app-container">
        <div class="title">个人信息</div>
        <div class="form">
          <div class="form-top">
            <el-form ref="ruleForm1" :model="ruleForm1" :rules="rules" label-width="120px" class="demo-ruleForm">
              <div class="form-group">
                <div class="group_item">
                  <div class="group_item_left">
                    <div style="width:60%">
                      <div class="group_name">账户信息：</div>
                      <el-form-item label="用户名：">
                        <el-input v-model="ruleForm1.user_name" placeholder="请输入账户信息" :disabled="true" />
                      </el-form-item>
                      <div class="group_tip">TIPS：注意用户名不可修改</div>
                      <el-form-item label="密码：">
                        <el-input v-model="ruleForm1.pass_wd" type="password" show-password placeholder="请输入密码" />
                      </el-form-item>
                      <div class="group_tip">TIPS：如不修改密码可不填写</div>
                      <el-form-item label="手机号码：" prop="phone">
                        <el-input v-model="ruleForm1.phone" type="tel" placeholder="请输入手机号码" />
                      </el-form-item>
                      <el-form-item
                        label="邮箱："
                        prop="email"
                        :rules="[
                          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                        ]"
                      >
                        <el-input v-model="ruleForm1.email" placeholder="请输入邮箱" />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="group_item_right">
                    <div class="group_name">机构头像：</div>
                    <el-form-item
                      label=""
                      prop="avatar"
                    >
                      <upload1
                        ref="upload4"
                        :config="config"
                        :urlnow="{url:ruleForm1.avatar}"
                        :upload-id="'uploadId4'"
                        :type="4"
                        @filepath="filepath4(arguments)"
                      />
                    </el-form-item>
                  </div>
                </div>
              </div>
            </el-form>
          </div>
          <div class="form-middel">
            <el-form ref="ruleForm2" :model="ruleForm1" :rules="rules" label-width="130px" class="demo-ruleForm">
              <div class="form-group">
                <div class="group_item">
                  <div class="group_item_left">
                    <div class="group_name">机构信息：</div>
                    <div style="width:60%">
                      <el-form-item label="机构名称：" prop="nickname">
                        <el-input v-model="ruleForm1.nickname" placeholder="请输入机构名称" />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="group_item_right2" />
                </div>
              </div>
            </el-form>
          </div>
        </div>
        <el-button type="primary" class="submit" :loading="loading" @click="saveSubmit">保存提交</el-button>
      </div>
    </template>
    <template v-else>
      <teacher-setting />
    </template>
  </div>
</template>

<script>
import upload1 from '@/components/upload/index1'
import { uploadConfig } from '@/components/upload/config/upload'
import teacherSetting from './index1'
import { addTeacher, getTeacherById } from '@/api/teacher'
import { delSessionInfo } from '@/utils/auth'
export default {
    name: 'PersonalInformation',
    components: {
        upload1,
        teacherSetting
    },
    props: {},
    data() {
        var checkPhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('手机号不能为空'))
            } else {
                const reg = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/
                console.log(reg.test(value))
                if (reg.test(value)) {
                    callback()
                } else {
                    return callback(new Error('请输入正确的手机号'))
                }
            }
        }

        return {
            config: uploadConfig,
            loading: false,
            filepath4li: [],
            id: this.$store.getters.userId,
            ruleForm1: {
                user_name: '',
                pass_wd: '',
                phone: '',
                email: '',
                nickname: '',
                avatar: ''
            },
            rules: {
                phone: [
                    { required: true, validator: checkPhone, trigger: 'blur' }
                ],
                avatar: [
                    { required: true, message: '请选择头像', trigger: 'blur' }
                ],
                nickname: [{ required: true, message: '请填写教师姓名', trigger: 'blur' }]
            }
        }
    },
    mounted() {
    // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        //  获取老师信息
        console.log('id', this.id)
        this.getTeacherInfo()
    },
    methods: {
        // 获通过id取老师信息
        getTeacherInfo() {
            getTeacherById({
                id: this.id
            }).then(res => {
                console.log('res>>>>>>>>>>>>', res)
                if (res.code === 200) {
                    if (Array.isArray(res.data)) {
                        console.log('值为空')
                    } else {
                        this.ruleForm1.user_name = res.data.user_name
                        // 密码需解密
                        this.ruleForm1.phone = res.data.phone
                        this.ruleForm1.email = res.data.email
                        this.ruleForm1.nickname = res.data.nickname
                        this.ruleForm1.avatar = res.data.avatar
                    }
                }
            })
        },

        filepath4(param) {
            console.log('上传图片', param[0])
            this.ruleForm1.avatar = param[1] + param[0]
            console.log('avatar', this.ruleForm1.avatar)
            if (this.ruleForm1.avatar) {
                console.log('有上传的图片')
                this.$refs['ruleForm1'].clearValidate('avatar')
                delete this.$refs['ruleForm1'].rules.avatar
            }
            this.filepath4li = [
                {
                    filepath: param[0]
                }
            ]
        },

        //   保存提交
        saveSubmit() {
            const rule1 = new Promise((resolve, reject) => {
                this.$refs['ruleForm1'].validate(valid => {
                    if (valid) {
                        resolve()
                    } else {
                        console.log('表单1验证不通过')
                        return false
                    }
                })
            })
            const rule2 = new Promise((resolve, reject) => {
                this.$refs['ruleForm2'].validate(valid => {
                    if (valid) {
                        resolve()
                    } else {
                        console.log('表单2验证不通过')
                        return false
                    }
                })
            })
            Promise.all([rule1, rule2]).then(async() => {
                this.loading = true
                // teacher_add
                var teacher_base = {
                    id: this.id,
                    user_name: this.ruleForm1.user_name,
                    pass_wd: this.ruleForm1.pass_wd,
                    phone: this.ruleForm1.phone,
                    email: this.ruleForm1.email,
                    nickname: this.ruleForm1.nickname,
                    parent_id: this.$store.getters.institute_id,
                    avatar: this.ruleForm1.avatar
                }

                console.log('参数1', teacher_base)
                addTeacher(teacher_base).then(async res => {
                    console.log('res', res)
                    if (res.code === 200) {
                        if (res.data.code) {
                            this.loading = false
                            this.$message.error(res.data.msg)
                        } else {
                        // 图片上传到服务器
                            await this.$refs.upload4.putFile(this.filepath4li)

                            this.$notify({
                                title: '成功',
                                message: '修改个人信息成功',
                                type: 'success'
                            })
                            setTimeout(() => {
                                this.loading = false
                                delSessionInfo()
                                location.reload()
                            }, 1500)
                            // 返回上一页
                        }
                    }
                })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}
.form{
    width: 100%;
    .form-group{
        width: 100%;
    }
    .group_name{
        margin: 20px;
    }
    .group_item{
         width: 100%;
         display: flex;
         .group_item_left{
             flex:1
         }
         .group_item_right{
              flex:1;
         }
         .group_item_right2{
              flex:1;
         }
    }
    .form-top{
    }
}
.submit{
    position:absolute;
    bottom: 0px;
    right: 20px;
}
.group_tip{
    color:red;
    padding-left: 120px;
    padding-bottom:20px;
}
.IDcardUpload{
    min-width: 366px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

// 教师简介
.box-card{
    // height: 400px;
    margin-top: 30px;
    &:first-child{
        margin-top: 0px;
    }
    .clearfix{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &::after{
            content: none;
        }

    }
}
.teacherExperience{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 30px;
    &:first-child{
        margin-top: 0px;
    }
.time{
    display: flex;
    align-items: center;
    width: 60%;
    .time-label{
        margin-right: 30px;
    }
}
.experience{
    display: flex;
    align-items: center;
    margin-top: 10px;
    .time-label{
        margin-right: 30px;
    }
}

}
.achievement-item{
    &:first-child{
        margin-top: 0px;
    }
    margin-top: 20px;
    display: flex;
    .achievement-label{
        margin-right: 30px;
    }
}
.areaSelect{
  display: flex;
  align-items: center;
  min-width:366px;
}
.detailAddress{
    margin-top: 10px;
}
</style>
